突撃！道産子アプリの開発環境パート3 【ダブルマップ編】

#iPhone

#HTML5

田宮宙比己

2016.04.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

dosanko-03

はじめに

こんにちは。朝のコーヒーが欠かせない田宮です！

北海道で生まれたアプリがどのようにして作られているのかをご紹介していくこの企画。

第3回目の今回は、吉田巧さんが開発した iOS アプリダブルマップをご紹介します！

前回までの目次

突撃！道産子アプリの開発環境パート１【DOCOL 編】｜ Developers.IO

突撃！道産子アプリの開発環境パート２【毎日がラーメン編】

ダブルマップとは

ここで、画面写真を交えて、具体的にアプリの内容を見ていきましょう。

また、ダブルマップ公式サイトに解説が載っていますので、そちらも合わせてご参照ください。

基本的な特徴はシンプルです。

特徴１：画面の上と下で地図を比較できる

ダブルマップの名の通り、2つの地図が同時に表示されます。

しかも、片方を拡大縮小すると、もう片方の地図も同じ縮尺になります。

通常の地図と同じく、画面をスワイプすればドンドン表示位置を変えられます。

こんな風に、本州と北海道、関東とアメリカ西海岸を比較したりも自由自在！

特徴２：地図を重ねて表示できる

2つの地図を、重ねて表示できます。

地図上で、2つの地図をタップ＆ホールドして、ピンチインする直感操作で、実現できます。

本州と北海道の大きさの比較もカンタンですね！

特徴３：上下の地図で面積が同じになるように変形表示

このアプリは Google Map を利用して地図を表示しています。

Google Map は、地図の角度などが正確なメルカトル図法を使って描画されています。

その変わり、面積は緯度の値が大きくなるほど、実際よりも大きく描かれています。そのままだと、緯度の高い位置と低い位置の比較が正確には出来ません。

ダブルマップでは、表示している位置の緯度に応じて、地図を拡縮する仕組みが備わっています。この機能については、後ほど興味深いお話が出てきますので、ぜひ最後まで読んでください！

デベロッパー紹介

今回のアプリを個人で開発されている、吉田巧さんにお話を伺うことが出来ました。

作者・吉田さんからの紹介

ー　どのようなアプリか教えて下さい。

吉田さん（以下敬称略）：ダブルマップは、土地勘のある地元と、知らない旅先の地図を、同一縮尺で比較して、感覚的に距離感を把握したり、移動手段の検討ができる地図アプリです。

ダブルマップのウリ

ー　ダブルマップのココが面白い！という部分やウリを教えて下さい。

吉田: 一つの地図では判りにくい実際の距離感を、馴染みの感覚で把握できます。知らない場所にいくことがある人には、誰でも便利に使ってもらえるはずです！また、よくネタになる北海道の大きさなども、簡単に別の場所と比べられるのが結構楽しいです。

開発ストーリーと開発環境

ネーミング

ー　ネーミングの由来を教えてください。

吉田: 文字通り単純に二つの地図、です。アメリカのバストラッキングサービスの会社と同名なので変更を検討中です。

開発期間

ー　ここまでの開発期間を教えて下さい。

企画は数日、デザイン・実装・検証など3か月、その後アップデートやバグフィックスは、だいたい累計1か月ほどといったところです。

楽しかった点・苦労した点

ー　開発していて楽しかったことを教えて下さい

吉田: もともとUIデザインが本業なので、このアプリに限った話ではないですが、使いやすい・判りやすいUIを考えて、実際に動いていくようにするのは楽しいですね。

ー　開発していて、苦労した点を教えて下さい。

吉田: メルカトル図法で描かれているグーグルマップで生じる、緯度の違いによる縮尺のズレを補正するのに苦労しました。

ー　どのような考え方で補正されているのでしょう？

吉田: APIのズーム値が同じでも、赤道から遠い地点ほどより拡大されて描画されているのです。

ー　なるほどです！

世の中の反応

ー　ダブルマップを使った人からのフィードバックはいかがですか？

吉田: 直接の知人・友人からは好評ですし、実際の旅行で役立ったという話を聞けたりして、作ってよかったなと思えたことはあります。が、全体としては、知らないユーザさんからのフィードバックはほぼ皆無なので、寂しさもあります。

ー　アプリ開発あるあるですよね。外部から取材を受けた、などありましたら教えて下さい。

吉田: Web上でインタビューしていただいているものがあります。

【Interview】旅先で距離感を掴もう！馴染みの場所と地図を比べる「DoubleMap 」とは？ | Techable(テッカブル)

技術的な工夫

ー　技術的に工夫された点を教えて下さい。

吉田: 上下のマップでの縮尺（と地形）のズレを立体的に補正するための処理については、工夫をしました。

Googleマップはメルカトル図法です。角度・方位が正しい図法一方、一つの地図でも上部（北）と下部（南）では実際とは縮尺がずれていまず。それを補正するために、2次元変形させつつ、もう一方の緯度の違う地図と実質同一サイズにするように工夫してあります。

開発ツール

ー　開発ツールを教えて下さい。

吉田: 主にこうしたツールを使っています。

コーディング
- Xcode
デザイン
- Sketch
コード管理
- Git
- Dropbox
タスク・スケジュール管理
- Trello

スクリーンショット 2016-03-26 9.00.13

使用OSS

ー　使用されたOSSを教えて下さい。

開発体制

ー　ダブルマップの開発体制を教えて下さい。

吉田: 企画・開発・デザイン全て一人です。

開発の知見

ー　開発の中で得られた知見などについて教えて下さい

吉田: このアプリが、自分が初めてリリースしたアプリでした。大きな話としては、プログラミングで動く道具を作ること全体に関して学べたことが１つあります。もう少し具体的には、iOS のUIデザインに倣いつつ、独自のUIアイディアを実装しようとすると、予想以上に面倒だったり、地道な作業が必要で、その辺に関してノウハウを得られました。

たとえば、ダブルマップの場合、１つのビューが回転するのではなく、ハードウェアの画面に対して、固定された位置の２画面を回転させないといけません。

それを実現するため、viewWillTransitionToSize(_:withTransitionCoordinator:)内で親ビュー全体を逆回転させながら、子ビュー（２つの地図）を回転させたりなどの処理について慣れたりする必要がありました。

また、モーダル画面で背景透過をさせたいので、UIViewControllerTransitionDelegateについて学んだりしました。

Apple Map API と Google Map SDK を比較して API 的にも Google のものが使い易かったです。１つの地図でピンチジェスチャー実行中の値を、もう一つの地図にリアルタイムで追従させるのは、 Google Map でしかできませんでした。

地図補正アルゴリズム

ー　上下のマップでの縮尺のズレを立体的に補正するための処理・アルゴリズムについて解説頂ければうれしいです。

二つの補正を行ってます、縮尺（zoom値）のズレと、メルカトル図法の緯度によるズレです。

縮尺 / zoom 値の調整

12325943_10100520710950628_1111871818_o

まず歪みの無い本来の縮尺 1 に対して、地図の四隅の緯度それぞれの縮小割合を算出します。

これは、地球の断面図を円として見た際、赤道 = 1 からの cos 値です。極点 = 0です。

得られた四隅の縮小割合から基準値を取得し、二つの地図の緯度の縮小割合の差異を算出します。

Google Map ではズーム値が 1 増えるごとに面積が 1/4 になります。

アクティブな、操作している側の地図のズーム値を基準に、もう片方のズーム値を、先ほどの縮小割合の差異を使って変更します。

メルカトル図法の緯度による拡大値の補正

12896211_10100520710940648_1451553248_o

地図が表示されている矩形の四隅を、本来拡大されてなかった場合の位置まで戻すことで、台形ではあるが少なくとも球体上の４点をみている状態にするアプローチをとっています。

zoom値調整と同様に、地図の四隅の縮小割合を取得し、その４点の中で一番大きいもの（＝歪みが最小の点）をベースにそれ以外の割合を算出。
MapView の角４点を中心からの距離 1 に対して上記の割合の所まで「縮めた」位置を算出します。
その新たな４点の位置へ MapView を CATransform3D で変形し表示しています。

ちなみに、毎回地図の４隅の値を相対化させているのは、変形後の地図が画面上で最大表示されるようにしておくためです。

一日の流れ

ー　開発日の標準的な一日の流れを教えて下さい。

吉田: 本業が別にあるので、その前後や週末に自宅やカフェで数時間単位で作業が多いです。

ー　本業ではどのようなことをされているのですか？

吉田: 自社開発のWebサービスやアプリのUIの設計・実装などが主です。

ー　本業が別だと、大変だと思うのですが、アプリ完成までのモチベーションを維持するための工夫などがありましたら教えて下さい。

吉田: おっしゃる通り大変でした。意識的にモチベーション維持するために何かをした訳ではないですが、少しずつでも頭の中にあるアイディアが具現化していくのが面白いという点と、ある程度機能が出来てきてからは、自分自身が旅行などで使って役に立ったりすることが、それ以後のブラッシュアップのモチベーションに繋がっていたのかなと思います。